<template>
	<view class="gyd-func-menu">
		<u-grid class="grid-list" :border="false" :col="col">
			<u-grid-item class="grid-item" v-for="(item, index) in menuList" :key="index" @click="goPage(item)">
				<!-- #ifndef MP -->
				<uni-icons :type="item.icon" custom-prefix="iconfont" :size="32" :color="item.color"
					v-if="item.icon_type==1"></uni-icons>
				<image class="grid-icon" :src="item.image" v-if="item.icon_type==0" mode="aspectFill"></image>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<uni-icons :type="item.icon" custom-prefix="iconfont" :size="32" :color="item.color"
					v-if="item.icon_type==1"></uni-icons>
				<image class="grid-icon-mp" :src="item.image" v-if="item.icon_type==0" mode="aspectFill"></image>
				<!-- #endif -->
				<text class="grid-text">{{ item.name }}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>
<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		defineProps,
		computed,
		onMounted,
		ref,
	} from 'vue';

	defineOptions({
		name: 'gyd-func-menu'
	});

	const props = defineProps({
		menu_type: {
			type: Number,
			default: 1
		},
		col: {
			type: Number,
			default: 3
		},
	});

	const menuList = ref([]);
	const current = ref(0);

	onMounted(() => {
		const role = cache.get('role', false);
		const store = cache.get('selStore')

		let params = {
			menu_type: props.menu_type,
			role: role,
			merchant_type: store.user_type,
		};
		getMenus(params);
	})

	async function getMenus(params) {
		console.log('params', params);
		let res = await request.get('managemenus/getMenu', params);
		menuList.value = res.data;
	}

	function goPage(item) {
		if (item.url == '#') {
			if (item.flag == 'scan') {
				scan();
			}
		} else {
			pageRoute(item.url);
		}
	}

	function scan() {
		// #ifdef MP-WEIXIN
		console.log('微信小程序扫一扫');
		// #endif
		// #ifdef H5
		console.log('H5扫一扫');
		// #endif
		// #ifdef APP
		console.log('APP扫一扫');
		// #endif
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}
</script>

<style lang="scss">
	.gyd-func-menu {
		.grid-list {
			padding: $m12 0;

			.grid-item {
				.grid-icon {
					width: 48rpx;
					height: 48rpx;
					margin: 10rpx auto;
				}

				.grid-icon-mp {
					width: 18rpx;
					height: 18rpx;
				}

				.grid-text {
					font-size: $font-28;
					color: $main-color;
					margin: 10rpx auto;
				}
			}
		}
	}
</style>